<!-- 新增/编辑规格 -->
<template>
	<view class="inventory">
		<view class="form">
			<view class="form-item">
				<view class="form-item-name">规格名称</view>
				<input v-model="form.name" type="text" placeholder="请输入规格名称" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">规格编码</view>
				<input v-model="form.num" type="text" placeholder="请输入规格名称" class="form-item-input" />
				<u-icon name="e616" size="44" color="#18b566" custom-prefix="iconfont" @click='onScanCode'></u-icon>
			</view>
			<view class="form-item">
				<view class="form-item-name">零售价格</view>
				<input type="text" v-model="form.amount" placeholder="请输入零售价格" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">采购价格</view>
				<input type="text" v-model="form.procurement_price" placeholder="请输入采购价格" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">分销价格</view>
				<input type="text" v-model="form.platfor_price" placeholder="请输入分销卖价" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">会员价格</view>
				<input type="text" v-model="form.vip_price" placeholder="请输入会员价格" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">库存数量</view>
				<input type="number" v-model="form.stock_num" placeholder="请输入库存数量" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">订单返佣</view>
				<input type="text" v-model="form.rebate" placeholder="请输入订单返佣" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">购买限制数</view>
				<input type="number" v-model="form.max_num" placeholder="请输入购买限制数" class="form-item-input" />
			</view>
			<view class="form-item">
				<view class="form-item-name">排序</view>
				<input type="number" v-model="form.sort" placeholder="请输入排序" class="form-item-input" />
			</view>
			<view class="form-item flex-sb">
				<view class="form-item-name">是否上架</view>
				<u-switch v-model="form.status" active-value="1" inactive-value="0">
				</u-switch>
			</view>
		</view>
		<view class="line"></view>


		<view class="upload">
			<view class="upload-title">
				产品封面图片
			</view>
			<view class="upload-box">
				<view class="upload-item" v-if="form.img">
					<image :src="form.img" class="upload-imageList"></image>
					<view class="upload-delete" @click="onDelete(index,'img')">x</view>
				</view>
				<view class="upload-item" @click="onUploadImage('img')">
					<image src="../../../static/pz.jpg" class="upload-image"></image>
				</view>
				<!-- 占位置 -->
				<!-- len 为数组长度 3位每行所占位置 -->
				<view class="upload-line"></view>
			</view>
		</view>

		<!-- 占位 -->
		<view class="tabTitle-line"></view>
		<view class="tabTitle" @click="onEdit">
			<view class="tabTitle-name">
				{{title}}
			</view>
		</view>
	</view>
</template>


<script>
	import {prodMix} from '../../index.js'
	export default {
		mixins: [prodMix],
		data() {
			return {
				form: {
					name: '', //规格名称
					amount: '', //零售价格
					vip_price: '', //会员价格
					procurement_price: '', //采购价格
					platfor_price: '', //分销价格
					rebate: '', //返佣
					stock_num: '', //库存数量
					max_num: '', //限制购买数量
					sort: '', //排序
					status: 0, //是否上架
					img: '', //产品图片
					num: '', //规格编码
					fk_prodtct_id: '', //产品ID
				},
				checkInputList: {
					name: {
						message: '请输入规格名称'
					},
					num: {
						message: '规格编码需要纯数字',
						method: 'pureNumber'
					},
					amount: {
						message: '零售价格需要纯数字',
						method: 'pureNumber'
					},
					procurement_price: {
						message: '采购价格需要纯数字',
						method: 'pureNumber'
					},
					platfor_price: {
						message: '分销价格需要纯数字',
						method: 'pureNumber'
					},
					vip_price: {
						message: '会员需要纯数字',
						method: 'pureNumber'
					},
					stock_num: {
						message: '库存数量需要纯数字',
						method: 'pureNumber'
					},
					rebate: {
						message: '返佣金额纯数字',
						method: 'pureNumber'
					},
					max_num: {
						message: '限制购买数纯数字',
						method: 'pureNumber'
					},
					sort: {
						message: '排序纯数字',
						method: 'pureNumber'
					},
					img: {
						message: '请上传图片',
					}
				},
				title: '编辑规格',
			}
		},
		onLoad(options) {
			this.initPage()
		},

		methods: {

			initPage() {
				let pages = getCurrentPages();
				pages = pages[pages.length - 2].$vm
				let productList = pages.productList
				if (productList.pk_id) { //编辑的时候上个页面productList赋值了一个对象并且里面有个pk_id才进来
					this.dynamic('编辑规格')
					this.form.pk_id = productList.pk_id
					for (let i in this.form) {
						this.form[i] = productList[i]
					}
					return
				}
				this.form.fk_prodtct_id = productList //新增的时候上个页面的fk_prodtct_id只赋值了个id
				this.title = '新增规格'
				this.dynamic(this.title)

			},

			// 扫码
			onScanCode() {
				let $this = this
				wx.scanCode({
					success(res) {
						$this.form.num = res.result
						uni.showToast({
							title: '添加条码成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '请重新扫码',
							icon: 'none'
						})
					}
				})
			},



			onEdit() {
				this.checkInput().then(res => {
					if (res) {
						this.$loading('提交中，请稍后')
						let title = '提交成功'

						let params = {
							...this.form,
						}
						params.status = params.status ? 1 : 0
						if (!this.form.pk_id) {
							this.$AddNewData('b_product_stock', {
								...params
							}).then(res => {
								this.onSuccess(title)
							}).catch(() => {
								this.$hide()
							})
							return
						}
						this.$UpdateModify('b_product_stock', {
							...params
						}).then(res => {
							this.onSuccess(title)
						}).catch(() => {
							this.$hide()
						})

					}

				})

			},


		}
	}
</script>

<style lang="scss" scoped>
	.form-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		padding: 0 30rpx;
		border-top: 1rpx solid #f5f5f5;

		.form-item-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-right: 32rpx;
		}

		.form-item-input {
			width: 500rpx;
			height: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: #BABABA;
			box-sizing: border-box;
			padding-right: 30rpx;
			letter-spacing: 3rpx
		}
	}

	.line {
		width: 100%;
		height: 23rpx;
		background-color: #f5f5f5;
	}

	// 占位
	.tabTitle-line {
		width: 100%;
		height: 108rpx;
	}

	.upload {
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.upload-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #222222;
			margin-bottom: 30rpx;
		}

		.upload-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.upload-line {
				width: calc(100% / 3 - 40rpx);
				height: 216rpx;
			}

			.upload-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(100% / 3 - 40rpx);
				height: 216rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
				margin-bottom: 30rpx;

				.upload-delete {
					position: absolute;
					text-align: center;
					line-height: 35rpx;
					font-size: 30rpx;
					font-weight: 700;
					right: -10rpx;
					top: -15rpx;
					width: 35rpx;
					height: 35rpx;
					color: #ffffff;
					border-radius: 50%;
					background-color: red;
				}

				.upload-image {
					width: 50rpx;
					height: 44rpx;
				}
			}

		}
	}


	// 保存 || 编辑
	.tabTitle {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		height: 138rpx;
		padding: 15rpx 45rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #f5f5f5;
		background-color: #ffffff;
		z-index: 99;

		.tabTitle-name {
			width: 100%;
			height: 88rpx;
			background: #3297EF;
			border-radius: 8rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.flex-sb {
		display: flex;
		justify-content: space-between;
	}
</style>
